<template>
  <div style="width:100%;margin:0 auto;height:640px;">
    <div class="sidebar">
      <el-menu default-active="" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <div v-for="item in values" :key="item.id">
          <el-menu-item v-if="!item.children || item.children.length === 0" @click="getMx(item)">
            <span slot="title" style="color:#333;">{{ item.title }}</span>
          </el-menu-item>
          <el-submenu v-else :index="item.id">
            <span slot="title">{{ item.title }}</span>
            <div v-for="item2 in item.children" :key="item2.id">
              <el-menu-item v-if="!item2.children" @click="getMx(item2)">
                <span slot="title" style="color:#333">{{ item2.title }}</span>
              </el-menu-item>
              <el-submenu v-else :index="item2.id">
                <span slot="title">{{ item2.title }}</span>
                <div v-for="item3 in item2.children" :key="item3.children">
                  <el-menu-item v-if="!item3.children" @click="getMx(item3)">
                    <span slot="title" style="color:#333">{{ item3.title }}</span>
                  </el-menu-item>
                </div>
              </el-submenu>
            </div>
          </el-submenu>
        </div>
      </el-menu>
    </div>

    <div id="mx" class="main" style="height: 640px; background-color: #fff;" v-if="displayVisible">
      <!-- 内容区域 -->
      <div id="box" ref="box" class="content">
        <div class="markdown-body" v-html="list.content" />
      </div>
    </div>
  </div>
</template>

<script>
import { getDataDictoryList as getAPIList, getDataDictoryMXList as getAPIMXList } from '@/api/api'

export default {
  props: { // 第二种方式
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: '',
      val: [],
      values: [],
      displayVisible: false
    }
  },
  created() {
    this.getMenu()
  },
  methods: {
    getMenu() {
      getAPIList({ xmId: this.proid }).then(response => {
        this.values = response.data
        this.val = response.data[0]
      })
    },
    getMx(item) {
      if (item.flag === 'WD') {
        // document.getElementById('mx').style.display = ''
        this.displayVisible = true
        getAPIMXList({ id: item.id }).then(response => {
          this.list = response.data
        })
      }
    },
    // 滚动监听器
    onScroll() {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll('.content')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navContents.forEach(item => {
        offsetTopArr.push(item.offsetTop)
      })
      // 获取当前文档流的 scrollTop
      const scroll = document.querySelector('.content').scrollTop + 173
      // 定义当前点亮的导航下标
      let navIndex = 0
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是n了
        if (scroll >= offsetTopArr[n]) {
          navIndex = n
        }
      }
      this.active = navIndex
    },
    // 跳转到指定索引的元素
    scrollTo(index) {
      // alert(index)
      // 获取目标的 offsetTop
      // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
    //   const targetOffsetTop = document.querySelector(`.content div:nth-child(${index + 1})`).offsetTop
      // this.box = this.$refs.box
      const targetOffsetTop = document.querySelector(`.content`).offsetTop
      // 获取当前 offsetTop
      let scrollTop = document.querySelector('.content').scrollTop
      // 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，
      const STEP = 50
      // 判断是往下滑还是往上滑
      if (scrollTop > targetOffsetTop) {
        // 往上滑
        smoothUp()
      } else {
        // 往下滑
        smoothDown()
      }
      // 定义往下滑函数
      function smoothDown() {
        // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置\
        if (scrollTop < targetOffsetTop) {
        //   alert('下滑')
          // 如果和目标相差距离大于等于 STEP 就跳 STEP
          // 否则直接跳到目标点，目标是为了防止跳过了。
          if (targetOffsetTop - scrollTop >= STEP) {
          // alert('22')
            scrollTop += STEP
          } else {
            // alert('33')
            scrollTop = targetOffsetTop
          }
          document.querySelector('.content').scrollTop = scrollTop + 1
          // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
          requestAnimationFrame(smoothDown)
        } else {
          console.log('else')
        }
      }
      // 定义往上滑函数
      function smoothUp() {
        if (scrollTop > targetOffsetTop) {
          if (scrollTop - targetOffsetTop >= STEP) {
            scrollTop -= STEP
          } else {
            scrollTop = targetOffsetTop
          }
          document.querySelector('.content').scrollTop = scrollTop + 1
          requestAnimationFrame(smoothUp)
        }
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
      this.show = true
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
      this.show = false
    }
  }
}

</script>

<style lang="scss" scoped>
/* 内容区的样式 */
.content {
  background-color: white;
  height:100%;
}
.content ::-webkit-scrollbar{
  display:none;
}
.content div {
  width: 93%;
  /* height: 600px; */
  font-size: 24px;
  padding: 20px;
}
.sidebar{
  width:300px;
  display: inline-block;
  border-right: 1px solid rgba(125,125,125,0.24);
  height:100%;
  &:focus {
    color:#fff !important;
    background-color: rgba(38, 119, 123, 0.6) !important;
  }
}
.main {
  display: inline-flex;
  width:calc(100% - 320px)
}
.main ::-webkit-scrollbar {
    display: none;
  }
  .el-menu{
    border-right:none
  }
  .bottom{
    width:1200px;
    margin:0 auto;
    font-size:16px;
    color:#fff;
    margin-top:5px;
}
.el-menu-vertical-demo{
  height: 100%;
}
</style>
